<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="./../resources/css/tableLayout.css" rel="stylesheet" type="text/css" />
    <h:head>
        <title>Event Management</title>
    </h:head>
    <ui:define name="left">

    </ui:define>

    <ui:define name="content">
        <f:view beforePhase="#{manageEventManagedBean.initView}">


            <h:body>


                <p:wizard widgetVar="wiz"  
                          flowListener="#{manageEventManagedBean.onFlowProcess}">  

                    <p:tab id="step1_event" title="Step 1: Create Event Details"> 
                        <p:panel header="Basic Event Details:" >
                            <p:messages id ="statusMessages"/>

                            <h:panelGrid columns="2" cellspacing="2" cellpadding="9">
                                <h:outputText id="labelActivityType" value="#{bundle['activity.type']} " style="font-weight: bold" />
                                
                                <h:selectOneMenu id="activityType" value="#{manageEventManagedBean.activityType}" converter="activityTypeConverter"
                                                 >
                                    <f:selectItems id="stakeholderselectedItems" value="#{enumActivityType.listItems}"/>
                                </h:selectOneMenu>

                                <h:outputText id="labelEventTitle" value="#{bundle['event.title']} " style="font-weight: bold" />

                                <h:column id="eventNameCol">
                                    <p:inputText value="#{manageEventManagedBean.event.eventName}" 
                                                 id ="eventTitle" style="width:410px;" required="true"
                                                 requiredMessage="Please enter the event name"/>

                                    <p:watermark for="eventTitle" value="Enter the name of your event" />  
                                </h:column>

                                <h:outputText value="#{bundle['event.desc']}" style="font-weight: bold"  />
                                <p:editor value="#{manageEventManagedBean.event.eventDesc}"
                                          required="true" id="eventDesc" requiredMessage="Please enter the event description"/>

                                <h:outputText value="#{bundle['upload.event.logo']}" style="font-weight: bold" />
                                <h:column id="fileuploadColumn">
                                    <p:fileUpload fileUploadListener="#{addAdvertisementManagedBean.handleImageUpload}"
                                                  style="float: left;" update="statusMessages"/>
                                    <h:column id="words">
                                        <h:outputText value="Upload the logo for your event: Must be JPG, GIF, or PNG smaller than 100Kb." 
                                                      style="font-size: 10px; color: red; float: right;"/>
                                        <h:outputText value=" Dimensions are limited to 450 x 200 px. Images larger than this will be resized."
                                                      style="font-size: 10px; color: grey; float: right;"/>
                                    </h:column>
                                </h:column>

                            </h:panelGrid>

                        </p:panel>
                    </p:tab> 

                    
        
                    <p:tab id="step2_where" title="Step 2: Add Location...">  
                        
                     
                        <p:panel header="Event Venue Details:" >
                            <p:messages redisplay="false" />
                              <h:inputHidden value="#{manageEventManagedBean.activityType}" />
                            <h:panelGrid columns="2" cellspacing="2" cellpadding="9">
                                 <h:outputText id="labelVenue" value="#{bundle['venue.block']} " style="font-weight: bold" />
                                
                                <h:column id="venueBlkColumn">
                                    <p:inputText value="#{manageEventManagedBean.address.blkNumber}" 
                                                 id ="eventBlk" style="width:410px;"/>

                                    <p:watermark for="eventBlk" value="Example: Tower 5" />  
                                </h:column>

                                <h:outputText id="labelBuilding" value="#{bundle['venue.building']} " style="font-weight: bold" />

                                <h:column>
                                    <p:inputText value="#{manageEventManagedBean.address.buildingName}" 
                                                 id ="eventBuilding" style="width:410px;" required="true"
                                                 requiredMessage="Please enter the location name. If not application please enter N.A"/>
                                    <p:watermark for="eventBuilding" value="Example: Suntec City, Parang" />  

                                </h:column>


                                <h:outputText id="labelEventUnit" value="#{bundle['venue.unit']} " style="font-weight: bold" />

                                <h:column>
                                    <p:inputText value="#{manageEventManagedBean.address.unitNumber}" 
                                                 id ="eventUnit" style="width:410px;" />
                                    <p:watermark for="eventUnit" value="Example: Hall 8 or #01-11" />  

                                </h:column>


                                <h:outputText id="labelEventStreet" value="#{bundle['venue.street']} " style="font-weight: bold" />

                                <h:column>
                                    <p:inputText value="#{manageEventManagedBean.address.streetName}" 
                                                 id ="eventStreet" style="width:410px;" 
                                                 required="true" requiredMessage="#{bundle['streetName.required']}"/>
                                    <p:watermark for="eventStreet" value="Example: Temasek Boulevard" />  

                                </h:column>
                                   
                                <h:outputText id="labelPostal" value="#{bundle['venue.postalcode']} " style="font-weight: bold" />

                                <h:column>
                                     <p:inputMask required="true" mask="999999" label="postalCode" 
                                                  requiredMessage="#{bundle['stakeholder.register.postalcode.required']}" 
                                                  id="postalCode" value="#{manageEventManagedBean.address.postalCode}"/>
                        
                                    <p:watermark for="postalCode" value="Example: 640211" />  

                                </h:column>


                            </h:panelGrid>
                        </p:panel>

                    </p:tab>

                   
             

                    <p:tab id="step3_when" title="Step 3: Add More Details...">  

                        <p:panel header="Basic Event Details:" >
                            <p:messages redisplay="false" />
                              <h:inputHidden value="#{manageEventManagedBean.activityType}" />
                            <h:panelGrid columns="2" cellspacing="2" cellpadding="9">
                                <h:outputText id="labelOrganiseTitle" value="#{bundle['organiser.title']} " style="font-weight: bold; width: 180px;" />
                                <p:inputText value="#{manageEventManagedBean.organiser.organisationName}" 
                                                 id ="organiserName" style="width:310px;" required="true" 
                                                 requiredMessage="Please enter the Organiser name."/>
                                <h:outputText id="labelOrganiserDesc" value="#{bundle['organiser.Desc']} " style="font-weight: bold; width: 180px;" />
                                <p:inputTextarea value="#{manageEventManagedBean.organiser.organisationDesc}" 
                                                 id ="organiserDesc" style="width:310px; height: 210px;"/>
                                
                                
                            </h:panelGrid>
                             <p:separator />  
                             <h:panelGrid columns="4" cellspacing="2" cellpadding="9">
                                <h:outputLabel id="pstartDate" value ="#{bundle['label.sDate']}" style="font-weight: bold" />
                                <p:calendar id="calEventStartDate" value="#{manageEventManagedBean.eventTime.startDate}" showOn="button" showButtonPanel="true" navigator="true" required="true" 
                                            requiredMessage="#{bundle['promotion.startdate']}" pattern="MM/dd/yyyy" timeZone="UTC+8" />


                                <h:outputLabel id="pEndDatelabel" value ="#{bundle['label.eDate']}" style="font-weight: bold" />
                                <p:calendar id="calEventEndDate" value="#{manageEventManagedBean.eventTime.endDate}" showOn="button" showButtonPanel="true" navigator="true" 
                                            required="true" requiredMessage="#{bundle['promotion.endDate']}" pattern="MM/dd/yyyy" timeZone="UTC+8"/>


                                <h:outputLabel id="eventStartTime" style="font-weight: bold" value ="#{bundle['branch.operatinghours.label']}: "/>
                                <h:selectOneMenu binding="#{operatingHoursTimeStart}" id="eventStartTimeddl" value="#{manageEventManagedBean.eventTime.openingHoursEnum}" converter="operatingHoursConverter">
                                    <f:selectItems id="eventStartTimeSelected" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>

                                <h:outputLabel id="eventEndTime" style="font-weight: bold" value="#{bundle['branch.to.label']}"/>
                                <h:selectOneMenu id="eventEndTimeddl" value="#{manageEventManagedBean.eventTime.closingHoursEnum}" converter="operatingHoursConverter" >
                                    <f:selectItems id="eventEndTimeSelected" value="#{enumOperatingHours.listItems}"/>
                                </h:selectOneMenu>
                                
                                
                            </h:panelGrid>
                            <p:separator />     
                             
                            
                            <h:panelGrid columns="4" cellspacing="2" cellpadding="9" >
                            
                             <h:outputText id="labelTicketTitle" value="#{bundle['ticket.title']} " style="font-weight: bold; width: 180px;" />
                                <h:column id="ticketNameColumn">
                                    <p:inputText value="#{manageEventManagedBean.ticket.ticketName}" 
                                                 id ="ticketTitle" style="width:310px;" />

                                    <h:outputText value="Examples: Member, Non-member, Student, Early Bird"
                                                  style="font-size: 10px; color: grey; float: left;"/>
                                </h:column>

                                <h:outputText id="labelTicketPrice" value="#{bundle['ticket.price']} " style="font-weight: bold;" />

                                <h:column id="ticketPriceColumn">
                                    <p:inputText value="#{manageEventManagedBean.ticket.price}" 
                                                 id ="ticketPrice" style="width:280px;" required="true" 
                                                 requiredMessage="Please enter the ticket name." >

                                        <f:convertNumber currencySymbol="$" groupingUsed="#{true}" maxFractionDigits="2" type="currency" />
                                    </p:inputText>
                                    <h:outputText value="Input $0.00, if it is a free event"
                                                  style="font-size: 10px; color: red; float: right;"/>
                                </h:column>
                              
                                
                            </h:panelGrid>
                               
                            <p:commandButton value="#{bundle['btnSave']}" actionListener="#{manageEventManagedBean.saveEvent}" ajax="false" process="@this"/>
                             
                        </p:panel>

                    </p:tab>
                   

                </p:wizard>  
            </h:body>
            <p:ajaxStatus>  
                <f:facet name="start">  
                    <h:graphicImage value="../design/ajaxloading.gif" />  
                </f:facet>  

                <f:facet name="complete">  
                    <h:outputText value="" />  
                </f:facet>  
            </p:ajaxStatus>  
        </f:view>
    </ui:define>
</ui:composition>
